<template>
  <div class="member-info-interest">
    <p class="tip">建议多选几个感兴趣的分类，我们会更精准的推荐相关商品哦！</p>
    <ul class="list">
      <li v-for="item in inserestList" :key="item.id">
        <div class="img">
          <img :src="item.url" alt />
        </div>
        <div class="chk">
          <xtx-checkbox v-model="item.check">{{item.name}}</xtx-checkbox>
        </div>
        <div class="selected" v-if="item.check">
          <span class="iconfont icon-queren"></span>
        </div>
      </li>
    </ul>
    <div class="btn">
      <a class="save-btn" @click="save()" href="javascript:;">保存</a>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import { findInterest, updateInterest } from '@/api/personal'
export default {
  name: 'PersonalInterest',
  setup () {
    onMounted(() => {
      getInterestInit()
    })
    const inserestList = ref([])
    const getInterestInit = () => {
      findInterest().then(data => {
        inserestList.value = data.result
      })
    }
    const save = () => {
      const ids = reactive([])
      inserestList.value.forEach(item => {
        if (item.check) {
          ids.push(item.id)
        }
      })
      updateInterest(ids).then(data => {
        console.log('接口待完成')
      })
    }
    return { getInterestInit, inserestList, save }
  }
}
</script>

<style lang="less" scoped>
.member-info-interest {
  padding: 20px;
  min-height: 400px;
  position: relative;
  .tip {
    color: #999;
    padding: 10px 0 40px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 100px;
      margin: 0 35px;
      padding-bottom: 30px;
      position: relative;
      .img {
        width: 100px;
        height: 100px;
      }
      .chk {
        text-align: center;
        padding: 20px 0;
      }
      .selected {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.3);
        text-align: center;
        line-height: 100px;
        span {
          color: #fff;
          font-size: 60px;
        }
      }
    }
  }
  .btn {
    padding-left: 310px;
    padding-top: 70px;
    .save-btn {
      width: 300px;
      line-height: 60px;
      height: 60px;
      background: #27ba9b;
      font-size: 16px;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      display: inline-block;
    }
  }
}
</style>
